<template>
  <div>
    <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>{{dialogData.title}}</span>
      </div>
      
      <el-row style="width:1120px;padding-bottom:150px;height:100%;overflow-y:auto" v-loading="loading">
        <el-col :span="18">
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row style="padding: 0 40px">
              <el-col :span="24">
                <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    
                  <a-collapse-panel class="marginB10" header="基础信息" key="1">
                    <el-row :gutter="40" style="margin-top: 14px">
                        <el-col :span="12">
                            <el-form-item label="是否启用:" prop="enable">
                                <el-switch v-model="parames.enable"></el-switch>
                            </el-form-item>
                        </el-col>
                      <el-col :span="12">
                        <el-form-item label="渠道来源:" >
                            <el-select v-model="parames.resourceAttribution" placeholder="请选择">
                                <el-option
                                v-for="item in laiyuanData"
                                :key="item.name"
                                :label="item.desc"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-row :gutter="40">
                          <el-col :span="12">
                            <el-form-item label="渠道商名称:" prop="channelName">
                              <el-input size="small" v-model="parames.channelName" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="联系人:">
                              <el-input size="small" v-model="parames.contacts" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="手机号:" >
                          <el-input v-model="parames.mobile" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="是否公开:" >
                          <el-switch v-model="parames.overt"></el-switch>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-row :gutter="40">
                          <el-col :span="12">
                            <el-form-item label="邮箱地址:">
                              <el-input size="small" v-model="parames.email" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="负责人:" prop="directorId">
                              <userTree v-model="parames.directorId" :currentValue="parames.directorId"></userTree>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24">
                            <el-form-item label="备注:">
                              <el-input size="small" v-model="parames.remark" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="签约日期:" prop="signingDate">
                            <el-date-picker
                            style="width:100%"
                            v-model="parames.signingDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="上传附件:">
                          <el-upload
                            class="upload-demo"
                            multiple
                            :headers="myHeaders"
                            :action="fileAction"
                            :on-success="handleSucess"
                            :on-remove="handleRemove"
                            :file-list="file">
                            <el-button icon="el-icon-upload2" type="primary" plain style="width: 400px">点击上传</el-button>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </a-collapse-panel>


                  <a-collapse-panel class="marginB10" header="账户信息" key="2">
                    <el-row style="margin-top: 20px" :gutter="14">
                      <el-col style="margin-bottom:10px" :span="8" v-for="(item,index) in parames.accountList" :key="index">
                        <el-card class="box-card" shadow="never">
                          <div slot="header" class="clearfix">
                            <span v-if="item.accountType == 'BANK'">银行账户</span>
                            <span v-if="item.accountType == 'ALIPAY'">支付宝账户</span>
                            <span v-if="item.accountType == 'WE_CHAT'">微信账户</span>
                            <span v-if="item.accountType == 'CASH'">现金账户</span>
                            <a-popconfirm
                              title="是否确认删除?"
                              @confirm="handleCanleAccount(index,item)"
                              okText="是"
                              cancelText="否"
                            >
                              <el-button style="float: right; padding: 3px 0;" icon="el-icon-delete" type="text"></el-button>
                            </a-popconfirm>
                            <el-button style="float: right; padding: 3px 0;margin-right: 10px" icon="el-icon-edit" type="text" @click="handleEditAccount(index,item)"></el-button>
                          </div>
                          <div>
                            <p>{{item.number}}</p>
                            <p>{{item.name}}</p>
                          </div>
                        </el-card>
                      </el-col>
                    </el-row>
          
                    <el-button icon="el-icon-plus" size="small" style="width:100%;margin-top:20px" @click="handleAddAccount">添加账户</el-button>
                  </a-collapse-panel>
                </a-collapse>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div v-if="dialogData.type == 'edit'">
            <el-button
              @click="handleCancle"
              size="small"
              icon="el-icon-close"
              style="width:200px;text-align: left;margin-bottom:10px"
            >取消编辑</el-button>
          </div>

        </el-col>
      </el-row>

      <div class="from-bottom-box">
        <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSend">保存</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </div>
    </a-drawer>
    <addAccountDialog :addAccountData="addAccountData" @addAccount="addAccount" @checkRender="checkRender"></addAccountDialog>

  </div>
</template>

<script>
import addAccountDialog from "./accountDialog.vue" //添加账户

export default {
  props: ["dialogData"],
  data() {
    
    return {
      loading: false,
      loadingBtn: false,
      activeNames: ['1','2'],
      laiyuanData: [], //来源
      fileAction: this.$api.postChannelAttachmentUpload, //附件上传地址
      myHeaders: {authorization: ''},
      addAccountData: { //账户弹窗
        title: '',
        id: '', //客户人员id
        type: '',
        data: {},
        show: false
      },
      fileList: [],
      file: [],
      parames: {
        id: '',
        enable: true, //是否启用（布尔值）,
        channelName: '', //渠道商名称,
        contacts: '', //联系人,
        mobile: '', //手机号,
        email: '', //邮箱地址,
        directorId: '', //负责人ID,
        resourceAttribution: '', //渠道来源（枚举）,
        overt: true, //是否公开（布尔值）,
        signingDate: '', //（签约日期）,
        remark: '', //备注,
        attachmentSet: [],
        accountList: []
      },
      rules: {
        enable: [
          { required: true, message: "必选", trigger: ['blur','change']},
        ],
        channelName: [
          { required: true, message: "必填", trigger: ['blur']},
        ],
        contacts: [
          { required: true, message: "必填", trigger: ['blur','change']},
        ],
      },
    };
  },
  methods: {
    checkRender () {
      this.render()
    },
    handleCancle () { //取消重新编辑
      this.dialogData.show = false
      this.$emit('checkOpen')
    },
    handleSucess (response,fileList) { //上传附件成功返回url
        this.fileList.push({
            name: response.data.name,
            url: response.data.url
        })
    },
    handleRemove (file) { //删除附件更新
        this.fileList.forEach((el,index)=>{
            if (file.response) {
                if (el.url == file.response.data.url) {
                    this.fileList.splice(index, 1)
                }
            } else {
                if (el == file.url) {
                    this.fileList.splice(index, 1)
                }
            }
        })
    },
    handleAddAccount () { //添加账户信息
      this.addAccountData.title = '新增账户'
      this.addAccountData.index = ''
      if (this.dialogData.type == 'new') {
        this.addAccountData.type = 'new'
      } else if (this.dialogData.type == 'edit') {
        this.addAccountData.type = 'saveNew'
        this.addAccountData.id = this.dialogData.id
      }
      this.addAccountData.data = []
      this.addAccountData.show = true
    },
    addAccount (value,type,index) { //新建时-新增账户回调
      if (type == 'new' || type == 'saveNew') {
        this.parames.accountList.push(JSON.parse(value))
      } else if (type == 'newEdit' || type == 'saveEdit') { //新建时-修改人员信息
        this.parames.accountList.splice(index,1,JSON.parse(value))
      }
    },
    handleEditAccount (index,row) { //修改
      this.addAccountData.title = '修改账户信息'
      this.addAccountData.index = index
      if (this.dialogData.type == 'new') {
        this.addAccountData.type = 'newEdit'
      } else if (this.dialogData.type == 'edit') {
        this.addAccountData.type = 'saveEdit'
      }
      this.addAccountData.data = JSON.stringify(row)
      this.addAccountData.show = true
    },
    handleCanleAccount (index,row) { //删除添加的账户
        this.parames.accountList.splice(index,1)
    },
    handleClose() {//关闭弹窗
      this.dialogData.show = false;
    },
    setData () {
      this.parames.attachmentSet = this.fileList
    },
    handleSend () { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.setData()
          this.loadingBtn = true
          if (this.dialogData.type == 'edit') { //修改保存成功--同时需要保存工商信息--财税信息
            this.$post(this.$api.postChannelEdit,this.parames).then(response => {
              if (response.data.succeed) {
                setTimeout(() => {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }, 200);
              }
            })
          } else { //新增
            this.$post(this.$api.postChannelAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$message({ type:'success',message: '保存成功'})
                this.$emit('checkRender')
                this.handleClose()
              }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        }
      })
    },
    render () { //获取详情信息
      this.loading = true
      this.$post(this.$api.postChannelFind,{
        channelId: this.dialogData.id
      }).then(response => {
        if (response.data.succeed) {
            this.activeNames = ['1','2']
            let data = response.data.data
            this.parames.id = data.id
            this.parames.enable = data.enable //是否启用（布尔值）
            this.parames.channelName = data.channelName //渠道商名称
            this.parames.contacts = data.contacts //联系人
            this.parames.mobile = data.mobile //手机号
            this.parames.email = data.email //邮箱地址
            this.parames.directorId = data.directorId //负责人ID
            if (data.resourceAttribution) {
                this.parames.resourceAttribution = data.resourceAttribution.name //渠道来源（枚举）
            }
            this.parames.overt = data.overt //是否公开（布尔值）
            this.parames.signingDate = data.signingDate //（签约日期）
            this.parames.remark = data.remark //备注
            this.parames.attachmentSet = data.attachmentSet
            this.fileList = data.attachmentSet
            data.attachmentSet.forEach(el=>{
                this.file.push({
                    name: el.name,
                    url: el.url
                })
            })
            this.parames.accountList = data.accountList
            this.parames.accountList.forEach(el=>{
                let data = el.accountType
                el.accountName = data.desc
                el.accountType = data.name
            })
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
    },
    resetData () { //重置数据
        this.activeNames = ['1','2']
        this.parames.id = ''
        this.parames.enable = true //是否启用（布尔值）
        this.parames.channelName = '' //渠道商名称
        this.parames.contacts = '' //联系人
        this.parames.mobile = '' //手机号
        this.parames.email = '' //邮箱地址
        this.parames.directorId = '' //负责人ID
        this.parames.resourceAttribution = '' //渠道来源（枚举）
        this.parames.overt = true //是否公开（布尔值）
        this.parames.signingDate = '' //（签约日期）
        this.parames.remark = '' //备注
        this.parames.attachmentSet = []
        this.parames.accountList = []
        this.fileList = []
        this.file = []
        this.$refs.parames.resetFields()
    },
  },
  components: {
    addAccountDialog
  },
  computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
            this.$utils.getEnumberation('postChannelResourceAttribution','laiyuanData',this) //渠道来源
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style scoped>
</style>
